<template>
  <div :class="`${prefixCls}`">
    <a-input :placeholder="placeholder" v-model:value="editCronValue" :disabled="disabled">
      <template #addonAfter>
        <a class="open-btn" :disabled="disabled?'disabled':null" @click="showConfigModal">
          <Icon icon="ant-design:setting-outlined"/>
          <span>选择</span>
        </a>
      </template>
    </a-input>
    <EasyCronModal
        @register="registerModal"
        v-model:value="editCronValue"
        :exeStartTime="exeStartTime"
        :hideYear="hideYear"
        :remote="remote"
        :hideSecond="hideSecond"/>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useDesign } from '/@/hooks/web/useDesign'
import { useModal } from '/@/components/Modal'
import { propTypes } from '/@/utils/propTypes'
import Icon from '/@/components/Icon/src/Icon.vue'
import EasyCronModal from './EasyCronModal.vue'
import { cronEmits, cronProps } from './easy.cron.data'

const { prefixCls } = useDesign('easy-cron-input')
const emit = defineEmits([...cronEmits])
const props = defineProps({
  ...cronProps,
  placeholder: propTypes.string.def('请输入cron表达式'),
  exeStartTime: propTypes.oneOfType([
    propTypes.number,
    propTypes.string,
    propTypes.object,
  ]).def(0),
})
const [registerModal, { openModal }] = useModal()
const editCronValue = ref(props.value)

watch(() => props.value, (newVal) => {
  if (newVal !== editCronValue.value) {
    editCronValue.value = newVal
  }
})
watch(editCronValue, (newVal) => {
  emit('change', newVal)
  emit('update:value', newVal)
})

function showConfigModal() {
  if (!props.disabled) {
    openModal()
  }
}
</script>

<style lang="less">
@import "easy.cron.input";
</style>
